<template>
	<div id="app">
		<!-- 		<img alt="Vue logo" src="./assets/logo.png">
		<div :style="{ fontSize: postFontSize + 'em' }">
			<HelloWorld v-for="post in posts" :key="post.id" :title="post.title" :post="post" v-on:enlarge-text="test" />
		</div>-->
		<!-- {{msg}} -->
		<!-- 		<CustomInput :searchText.sync="searchText">123</CustomInput>
		{{searchText}}
		<button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['tab-button', { active: currentTab === tab }]" v-on:click="currentTab = tab">
			{{ tab }}
		</button>
		<component v-bind:is="currentTabComponent" class="tab"></component> -->
		<!-- 		<button v-on:click="show = !show" v-color="red">
			{{msg | capitalize }}
		</button> -->
		<button v-on:click="t()">
			测试
		</button>
		<!-- 		<transition name="fade">
			<p v-if="show">hello</p>
		</transition> -->
		<Vuex1></Vuex1>
		<Vuex2></Vuex2>
		{{count}}

	</div>
</template>
<script>
	// import HelloWorld from './components/HelloWorld.vue'
	// import CustomInput from './components/CustomInput.vue'
	// import TabHome from './components/TabHome.vue'
	// import TabPosts from './components/TabPosts.vue'
	// import TabArchive from './components/TabArchive.vue'
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import Vuex1 from './components/Vuex1.vue'
	import Vuex2 from './components/Vuex2.vue'

	export default {
		name: 'App',
		components: {
			Vuex1,
			Vuex2
			// HelloWorld,
			// CustomInput,
			// TabHome,
			// TabPosts,
			// TabArchive
		},
		created() {
			console.log(this.$store.state.user.count);
		},
		// directives: {
		// 	//  每个指令都是一个对象
		// 	color: {
		// 		inserted: function(el, binding) { // 指令的定义
		// 			//el为绑定元素，
		// 			//可以对其进行dom操作
		// 			console.log(el, binding) //一个对象，包含很多属性属性
		// 		},
		// 		bind: function(el, binding, vnode) {
		// 			console.log(el, binding, vnode)
		// 			el.style.color = binding.expression
		// 		}
		// 	},
		// },
		// filters: {
		// 	capitalize: function(value) {
		// 		console.log(value)
		// 		if (!value) return ''
		// 		value = value.toString()
		// 		return value.charAt(0).toUpperCase() + value.slice(1)
		// 	}
		// },
		data() {
			return {
				// msg: "Welcome to Your Vue.js App",
				// posts: [{
				// 		id: 1,
				// 		title: 'My journey with Vue'
				// 	},
				// 	{
				// 		id: 2,
				// 		title: 'Blogging with Vue'
				// 	},
				// 	{
				// 		id: 3,
				// 		title: 'Why Vue is so fun'
				// 	}
				// ],
				// postFontSize: 1,
				// searchText: "",
				// currentTab: "Home",
				// tabs: ["Home", "Posts", "Archive"],
				// show: true
			}
		},
		computed: {
			...mapState({
				count: state => state.user.count,
				// 传字符串参数 'count' 等同于 `state => state.count`
				countAlias: 'count',
				// countPlusLocalState(state) {
				// 	return state.count + 1
				// }
			}),
			...mapGetters('user', ['get']),
		},
		methods: {
			...mapMutations({
				add: 'user/increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
			}),
			...mapActions({
				addAction: 'user/incrementAsync'
			}),
			t() {
				// console.log(this.$store.getters["user/get"])
				console.log(this.$store.getters["user/get"])
				// console.log(this.get)
				// this.add(10)
				// this.addAction({
				// 	amount: 10
				// }).then((res) => {
				// 	console.log(res)
				// })
			},
			// test(enlargeAmount) {
			// 	console.log(enlargeAmount)
			// 	this.postFontSize += enlargeAmount
			// }
		}
	}
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}

	.tab-button {
		padding: 6px 10px;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		border: 1px solid #ccc;
		cursor: pointer;
		background: #f0f0f0;
		margin-bottom: -1px;
		margin-right: -1px;
	}

	.tab-button:hover {
		background: #e0e0e0;
	}

	.tab-button.active {
		background: #e0e0e0;
	}

	.tab {
		border: 1px solid #ccc;
		padding: 10px;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .5s;
	}

	.fade-enter,
	.fade-leave-to

	/* .fade-leave-active below version 2.1.8 */
		{
		opacity: 0;
	}
</style>
